<template>
  <page-layout>
    <div slot="toolbar">
      <el-button size="small" round type="primary" @click="newTask">新增任务</el-button>
    </div>
    <div class="card-header">任务下发</div>
    <el-card class="box-card ">
      <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <el-form ref="searchTaskCondition" :model="searchTaskCondition" label-width="80px" inline>
            <el-form-item label="标题">
              <el-input v-model="searchTaskCondition.title" style="width: 300px;"/>
            </el-form-item>
            <el-form-item label="人员类别">
              <el-select v-model="searchTaskCondition.userType1" placeholder="请选择" style="width: 300px;">
                <el-option
                  v-for="item in UserTypes"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业名称" v-if="searchTaskCondition.userType1 !== 'dz' ">
              <depart-selector v-model="inputDepartName" @change="departSelected"/>
            </el-form-item>

            <el-form-item label="企业类别" v-if="searchTaskCondition.userType1 !== 'dz' ">
              <depart-category-selector v-model="inputDepartCategoryName" @change="departCategorySelected"/>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchTaskCondition.status" placeholder="请选择" style="width: 300px;">
                <el-option
                  v-for="item in TaskStatus"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search(1)">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      </el-card>
      <el-card class="box-card">
            <el-table
              :data="taskList.content" border stripe
              style="width: 100%">
              <el-table-column
                prop="id"
                label="编号"
                width="55">
              </el-table-column>
              <el-table-column prop="title" label="任务标题" ></el-table-column>
              <el-table-column prop="userType" label="人员分类" >
                <template slot-scope="scope">
                  <span >{{scope.row.userType|keyText('UserTypes')}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="departName" label="下发企业">
                <template slot-scope="scope">
                  <span >{{ scope.row.departName ? scope.row.departName : "全部企业"}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="departCategoryName" label="下发企业类别">
                <template slot-scope="scope">
                  <span >{{ scope.row.departCategoryName ? scope.row.departCategoryName : "所有类别"}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="startTime" label="下发日期" >
                <template slot-scope="scope">
                  <span >{{scope.row.startTime|formatTime('YYYY-MM-DD')}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="endTime" label="任务完成时间" >
                <template slot-scope="scope">
                  <span >{{scope.row.endTime|formatTime('YYYY-MM-DD')}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" >
                <template slot-scope="scope">
                  <span >{{scope.row.status|keyText('TaskStatus')}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="questType" label="任务分类" >
                <template slot-scope="scope">
                  <span >{{scope.row.questType|keyText('QuestTypes')}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="count" label="应派发数" ></el-table-column>
              <el-table-column prop="realCount" label="已派发数" ></el-table-column>
              <el-table-column prop="doneRate" label="完成率" ></el-table-column>
              <el-table-column prop="quests" label="任务列表" >
                <template slot-scope="scope">
                    <el-button type="text" @click="seeDetail(scope.row)" >查看</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button size="mini"  type="text" @click="editTask(scope.$index, scope.row)" >编辑</el-button>
                  <el-button size="mini" type="text" @click="deleteTask(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="mt10">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="taskList.totalElements"
                :page-size="taskList.size"
                :current-page.sync="currentTaskPage" @current-change="getPageChange">
              </el-pagination>
            </div>
          </el-card>
    </el-card>
    <el-dialog :visible.sync="showTaskEditor" title="添加/编辑 任务" width="70%">
    <task-editor @close="onTaskEditorClose"  :is-close="showTaskEditor"></task-editor>
  </el-dialog>
    <el-dialog :visible.sync="showDetailEditor" title="查看任务列表" width="70%">
      <el-table
        :data="QuestDetails" border stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="55">
        </el-table-column>

        <el-table-column prop="title" label="题目" ></el-table-column>
      </el-table>
      <el-row>
        <el-col>
             <span style="float: right;margin-top: 10px;">
                <el-button @click="showDetailEditor=false">返回</el-button>
            </span>
        </el-col>
      </el-row>

    </el-dialog>
  </page-layout>
</template>
<script>
import PageLayout from "@/components/page-layout";
import TaskEditor from "./task-editor";
import { mapGetters } from "vuex";
import ImageCover from "@/components/image-cover";
import Status from "@/libs/status";
import _ from "lodash";
import DepartSelector from "@/components/depart-selector";
import DepartCategorySelector from "@/components/depart-category-selector";

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getPageChange(1);
    });
  },
  created() {},
  mounted() {
    this.TaskStatus = _.clone(Status.TaskStatus);
    this.TaskStatus.unshift({ value: "", text: "全部" });
  },
  data() {
    return {
      currentTaskPage: 1,
      showDetailEditor: false,
      showTaskEditor: false,
      TaskStatus: [],
      QuestDetails: [],
      UserTypes: Status.UserTypes,
      timeout: null,
      inputDepartName: null,
      inputDepartCategoryName: null
    };
  },
  computed: {
    ...mapGetters({
      taskList: "taskList",
      searchTaskCondition: "searchTaskCondition"
    })
  },
  methods: {
    departSelected(id, name) {
      console.log(id + ":" + name);
      this.searchTaskCondition.departName = name;
      this.searchTaskCondition.departId = id;
    },
    departCategorySelected(id, name) {
      console.log(id + ":" + name);
      this.searchTaskCondition.departCategoryName = name;
      this.searchTaskCondition.departCategoryId = id;
    },
    seeDetail(row) {
      this.showDetailEditor = true;
      this.QuestDetails = row.quests;
    },
    getOptions(options) {
      var tem = options.split("\n");
      var str = "";
      if (tem) {
        tem.map((item, index) => {
          str += "<p>" + item + "</p>";
        });
      }

      return str;
    },
    getPageChange(val) {
      if (
        this.searchTaskCondition.userType1 === "dz" ||
        !this.inputDepartName
      ) {
        this.searchTaskCondition.departId = null;
        this.searchTaskCondition.departName = null;
        this.inputDepartName = null;
      }
      if (
        this.searchTaskCondition.userType1 === "dz" ||
        !this.inputDepartCategoryName
      ) {
        this.searchTaskCondition.departCategoryId = null;
        this.searchTaskCondition.departCategoryName = null;
        this.inputDepartCategoryName = null;
      }
      if (this.searchTaskCondition.userType1 === "all") {
        this.searchTaskCondition.userType = null;
      } else {
        this.searchTaskCondition.userType = this.searchTaskCondition.userType1;
      }
      var tem = Object.assign({ pageIndex: val - 1 }, this.searchTaskCondition);
      this.$store.dispatch("getTaskPageS", tem).then(ret => {});
    },
    search(val) {
      this.getPageChange(1);
    },
    deleteTask(row) {
      this.$confirm("确认删除当前活动?", "提示", {})
        .then(() => {
          this.$store.dispatch("deleteTaskS", { id: row.id }).then(ret => {
            this.getPageChange(1);
            this.$notify({
              title: "删除成功",
              type: "success"
            });
          });
        })
        .catch(() => {});
    },
    newTask() {
      this.$store.commit("INIT_CURRENT_TASK");
      this.showTaskEditor = true;
    },
    editTask(index, row) {
      this.$store.dispatch("getTaskS", row.id);
      this.showTaskEditor = true;
    },
    onTaskEditorClose() {
      this.showTaskEditor = false;
      this.getPageChange(this.currentTaskPage);
    },
    onShowPreviewClose() {
      this.showPreview = false;
      this.getPageChange(this.currentTaskPage);
    }
  },
  components: {
    PageLayout,
    TaskEditor,
    ImageCover,
    DepartSelector,
    DepartCategorySelector
  }
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
